<template>
    <!-- 顶部优惠券通知栏 -->
    <view class="coupon-banner">
		<img :src="logo" class="sidebar-logo" />
      <text class="coupon-text">知 医</text>
    </view>
    
    <!-- 城市选择 -->
    <view class="location-wrapper">
      <view class="location-bar">
        <view class="location-picker">
          <text class="iconfont icon-dingwei"></text>
		  <picker mode="selector" :range="cityList" @change="bindPickerChange" range-key="dictLabel">
		        <text class="location-text">{{ currentCity }}</text>
		  </picker>
        </view>
        <view class="notification-icon">
          <text class="notification-dot" v-if="hasNotification"></text>
          <text class="iconfont icon-notification" @click="goToNotification"></text>
        </view>
      </view>
    </view>
</template>

<script>
import {getDicts} from "@/api/city.js"
import logoImg from '@/static/logo.png'
export default {
  props: {
	  currentCity: {
		type: String,
		default: '北京'
	  },
	  currentCityId: {
	  		type: String,
	  		default: '1'
	  },
  },
  data() {
    return {
      hasNotification: true,
      cityList:[],
      logo: logoImg,
      res:[]
    }
  },
  created() {
    var that = this;
    //城市
    getDicts('city_type').then(res => {
      if (res.code == 200) {
        that.cityList = res.data;
      }
    });
  },
  methods: {
    bindPickerChange: function(e) {
      const index = e.detail.value;
      if (!this.cityList || !this.cityList[index]) {
        console.warn('城市数据未加载完成或索引无效');
        return;
      }
      this.currentCity = this.cityList[index].dictLabel;
      this.currentCityId = this.cityList[index].dictValue;
      console.log(this.currentCity,'picker发送选择改变，携带值为', this.currentCityId);
      this.$emit('value-changed', this.currentCityId);
    },
	 goToNotification() {
	   uni.navigateTo({
	 	url: `/pages/notification/list`
	   })
	   
	 },
  }
}
</script>

<style>
page {
  background-color: #F5F6FA;
}
.sidebar-logo {
  width: 100rpx;
  height: 100rpx;
  background: #ffffff;
}
.container {
  padding: 0;
}
.coupon-text{
	font-family:"Times New Roman",Georgia,Serif;
	font-size: 32rpx;
	padding: 32rpx;
	font-weight: bold;
}
.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333333;
  padding: 32rpx;
  background-color: #FFFFFF;
  margin-top: 20rpx;
}

.department-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32rpx;
  padding: 0 32rpx 32rpx;
  background-color: #FFFFFF;
}

.department-item {
  background-color: #FFFFFF;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32rpx;
  box-shadow: 0rpx 0rpx 3.5rpx rgba(0, 0, 0, 0.1); /* 阴影以增加突起效果 */
  border-radius: 20rpx;
}

.dept-icon {
  width: 90rpx;
  height: 90rpx;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 16rpx;
}

.dept-icon.iconfont {
  font-size: 48rpx;
  /* color: #666666; */
}

.dept-name {
  font-size: 26rpx;
  color: #333333;
}

.bg-pink {
  background-color: #fff1f2;
  color: #ff0000;
  margin: 0rpx 0rpx 0rpx 0rpx;
  padding: 5rpx;
  border-radius: 9rpx;
}

.bg-orange {
  background-color: #FFF5E8;
  color: #ff6913;
  margin: 0rpx 0rpx 0rpx 0rpx;
  padding: 5rpx;
  border-radius: 9rpx;
}

.bg-brown {
  background-color: #fffbeb;
  color: #dd7b19;
  margin: 0rpx 0rpx 0rpx 0rpx;
  padding: 5rpx;
  border-radius: 9rpx;
}

.bg-blue {
  background-color: #E8F1FF;
  color: #0659d5;
  margin: 0rpx 0rpx 0rpx 0rpx;
  padding: 5rpx;
  border-radius: 9rpx;
}

.bg-green {
  background-color: #E8FFE9;
  color: #0cbd30;
  margin: 0rpx 0rpx 0rpx 0rpx;
  padding: 5rpx;
  border-radius: 9rpx;
}

.bg-purple {
  background-color: #F3E8FF;
  color: #931cc2;
  margin: 0rpx 0rpx 0rpx 0rpx;
  padding: 5rpx;
  border-radius: 9rpx;
}

.consultation-card {
  margin: 20rpx 32rpx;
  background-color: #dbeafe;
  border-radius: 16rpx;
  padding: 32rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-title {
  font-size: 28rpx;
  color: #1e3a8a;
  display: block;
}

.card-subtitle {
  font-size: 24rpx;
  color: #1d4ed8;
  margin-top: 8rpx;
  display: block;
}

.contact-btn {
  background-color: #4B7BFF;
  color: #FFFFFF;
  font-size: 28rpx;
  padding: 10rpx 20rpx;
  border-radius: 9rpx;
  border: none;
  margin: 4rpx 2rpx; /* 按钮外边距 */
}

/* 按钮点击效果 */
.contact-btn:active {
  opacity: 0.8;
}

/* 城市显示效果 */
.city-picker {
	z-index: 999;
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	max-height: 80%;
	overflow-y: auto;
	border-top-left-radius: 20rpx;
	border-top-right-radius: 20rpx;
	transition: transform 0.3s ease;
}
</style>